<template>
  <div class="container">
    <div class="project-info-wrapper">
      <mt-header :title="project.name">
        <router-link :to="{name:'project'}" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
      </mt-header>
      <div class="project-header">
        <div class="project-title">
          <span class="project-name">
            项目编号：{{project.code}}
          </span>
          <h2 class="project-number">
            <span> {{project.investTotal}}<em>（万）</em><em v-text="project.investTotalCurrency"></em></span>
            <label>项目总投资</label>
          </h2>
        </div>
      </div>
      <div class="project-status">
        <div class="fl">
          <span v-text="project.status">初次会谈</span>
          <label>状态</label>
        </div>
        <div class="fr">
          <span v-text="project.capital"></span>
          <label>类型</label>
        </div>
      </div>
    </div>
    <div class="project-other-list">
      <ul>
        <router-link tag="li" replace :to="{name: 'projectContactList', params:{projectId: project.id}}">
          <span class="fa-stack fa-2x" style="color: #3AA4FE;">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-address-book-o fa-stack-1x fa-inverse"></i>
          </span>
          <label>项目联系人</label>
        </router-link>
        <router-link tag="li" replace :to="{name: 'projectMeetingList', params:{projectId: project.id}}">
          <span class="fa-stack fa-2x" style="color: #75D84B;">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-building-o fa-stack-1x fa-inverse"></i>
          </span>
          <label>会谈列表</label>
        </router-link>
        <router-link tag="li" replace :to="{name: 'projectContractList', params:{projectId: project.id}}">
          <span class="fa-stack fa-2x" style="color: #FFD13C;">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-file-text-o fa-stack-1x fa-inverse"></i>
          </span>
          <label>相关文档</label>
        </router-link>
      </ul>
    </div>

    <div class="project-detail-wrapper">
      <mt-cell :title="project.projectType"></mt-cell>
      <mt-cell title="项目类型">
        <span v-text="project.category"></span>
      </mt-cell>
      <mt-cell title="负责人" class="mw">
        <span v-text="project.owner" class="eclipse"></span>
      </mt-cell>
      <mt-cell title="会谈次数">
        <span v-text="project.meetingCount + '(次)'"></span>
      </mt-cell>
      <mt-cell title="注册资金">
        <span v-text="project.regCapital + '(万)' + project.regCapitalCurrency"></span>
      </mt-cell>
      <mt-cell title="地块需求">
        <span v-text="project.landPosition"></span>
      </mt-cell>
      <mt-cell title="载体需求">
        <span v-text="project.factoryPosition"></span>
      </mt-cell>
      <mt-cell title="落实情况"></mt-cell>
      <mt-field label="" placeholder="" type="textarea" rows="4" v-model="project.progress" readonly></mt-field>
      <mt-cell title="准备推进内容"></mt-cell>
      <mt-field label="" placeholder="" type="textarea" rows="4" v-model="project.plan" readonly></mt-field>
      <mt-cell title="政策协调小组"></mt-cell>
      <mt-field label="" placeholder="" type="textarea" rows="4" v-model="project.policyMngGrp" readonly></mt-field>
      <mt-cell title="规划建设协调小组"></mt-cell>
      <mt-field label="" placeholder="" type="textarea" rows="4" v-model="project.buildMngGrp" readonly></mt-field>
      <mt-cell title="申请人才计划"></mt-cell>
      <mt-field label="" type="textarea" rows="4" v-model="project.talentPlan" readonly></mt-field>
      <mt-cell title="备注"></mt-cell>
      <mt-field label="" placeholder="" type="textarea" rows="4" v-model="project.comments" readonly></mt-field>
    </div>
  </div>
</template>
<script>
  import ProjectMeetingList from './ProjectMeetingList'
  import ProjectContractList from './ProjectContractList'
  import fetch from '../../utils/fetch'
  import MtCell from "../../../node_modules/mint-ui/packages/cell/src/cell";
  export default{
    data (){
      return {
        selected: '1',
        project: Object,
        currentClass: 'cb'
      }
    },
    components:{
      MtCell,
      ProjectMeetingList,
      ProjectContractList
    },
    created(){
      this.handleGetProject()
    },
    computed:{
    },
    methods:{
      handleGetProject(){
        let projectId = this.$route.params.projectId
        fetch('/api/project/' +projectId + '/info').then(response =>{
          if(response.data.success) {
            this.project = response.data.obj
          }
        })
      }
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .mint-navbar{
    margin: 0 0 10px;
  }
  .container{
    background: #e7e7e7;
    height: 100%;
  }
  .project-info-wrapper{
    background: #26A2FF;
    min-height: 100px;
    .project-header{
      padding: 20px 0 0 0;
      .project-name{
        display: block;
        width: 100%;
        text-align: center;
        color: #A4E6F5;
        @include fz(5.5px);
        font-weight: 400;
      }
      .project-number{
        margin-top: 10px;
        text-align: center;
        span{
          @include fz(7.2px);
          font-weight: 700;
          color: #fff;
          em{
            @include fz(4px);
          }
        },
        label {
          margin-top: 10px;
          display: block;
          color: #A4E6F5;
          @include fz(5.5px);
          font-weight: 400;
        }
      }
    }
    .project-status{
      background: url("../../assets/project-bg.png") no-repeat;
      background-size:100% 100%;
      min-height: 100px;
      @include flex-center;
      padding: 60px 0 0 0;
      .fl, .fr{
        width: 50%;
        border-right: 1px solid #e9eaec;
        text-align: center;
        span {
          display: block;
          color: #0d0d0d;
          font-weight: 700;
          font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        }
        label{
          color: #80848f;
          margin-top: 10px;
          font-weight: 600;
          @include fz(4px)
        }
      }
    }
  }
  .project-other-list{
   @include clearfix;
    margin: 10px 0;
    background: #fff;
    ul {
      li {
        float: left;
        width: 33.3%;
        text-align: center;
        padding: 10px 0;
        label{
          display: block;
          color: #80848f;
        }
      }
    }
  }


  a:link{text-decoration:none;}
  a:visited{text-decoration:none;}
  a:hover{text-decoration:none;}
  a:active{text-decoration:none;}
  .eclipse{
    display: -webkit-box;
    text-overflow:ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    line-height: 1.2;
  }
</style>
